<template>
    <div class="scoreComponent" :style="
        {
            // 评分大小
            '--score-star-size': props.starSize + 'px',
            // 空星样式
            '--score-empty-star-color': 'rgba(135, 135, 135, 0.5)',
            // 满星样式
            '--score-full-star-color': 'rgba(65, 185, 255, 1)',
            // 评分值大小
            '--score-text-size': props.textSize + 'px',
            // 评分值样式
            '--score-text-color': 'rgba(65, 185, 255, 1)',
        }">
        <div class="scoreStar"
        @mouseleave="handleLeave()">
            <span v-for="i in maxValue" class="iconfont"
            :class="i <= showScore ? 'fullStar icon-likesprograma-shoucang2'
            : 'emptyStar icon-likesprograma-shoucang'"
            :key="i"
            @mouseenter="handleEnter(i)"
            @click="handleClick(i)">
                <span v-if="showScore - (i - 1) < 1 && showScore - (i - 1) > 0"
                class="iconfont icon-likesprograma-shoucang2"
                :style="{
                    'clip-path': `inset(0 ${(1-(showScore - (i - 1))) * 100}% 0 0)`,
                    '-webkit-clip-path': `inset(0 ${(1-(showScore - (i - 1))) * 100}% 0 0)`
                }"></span>
            </span>
        </div>
        <div class="scoreText" v-if="showText">{{ showScore > 0 ? showScore : '暂无评分' }}</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
    name: 'scoreComponent',
});
</script>

<script setup lang="ts">
    // 获取 props 参数
    const props = withDefaults(defineProps<{
        modelValue?: number;  // 评分
        maxValue?: number;    // 最大评分
        starSize?: number;        // 大小
        textSize?: number;        // 文字大小
        editor?: boolean;     // 是否可编辑
        showText?: boolean;  // 是否显示分数
    }>(), {
        modelValue: 5,
        maxValue: 5,
        starSize: 24,
        textSize: 20,
        editor: false,
        showText: false
    });

    const showScore = ref(0);

    // 鼠标进入
    const handleEnter = (score: number) => {
        if (!props.editor) return;
        showScore.value = score;
    };

    // 鼠标离开
    const handleLeave = () => {
        if (!props.editor) return;
        showScore.value = props.modelValue;
    };
    
    // 修改评分
    const emit = defineEmits(['update:modelValue']);

    // 点击修改评分
    const handleClick = (score: number) => {
        if (!props.editor) return;
        emit('update:modelValue', score)
    }

    // 监听 modelValue 参数变化
    watch(() => props.modelValue, (newValue, oldValue) => {
        if (newValue !== oldValue) {
            showScore.value = newValue;
        }
    }, { immediate: true, deep: true });
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.scoreComponent {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.scoreStar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    font-size: var(--score-star-size);
}
.scoreStar > span {
    position: relative;
}
.scoreStar > span > span {
    position: absolute;
    /* 居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.scoreText {
    color: var(--score-text-color);
    font-size: var(--score-text-size);
}
.emptyStar {
    color: var(--score-empty-star-color);
}
.scoreStar > span > span,
.fullStar {
    color: var(--score-full-star-color);
}
</style>